import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class TimePickerPage extends StatefulWidget {
  const TimePickerPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return TimePickerPageState();
  }
}

class TimePickerPageState extends State<TimePickerPage> {
  TimeOfDay? selectedTime;
  ThemeMode? themeMode = ThemeMode.dark;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      themeMode: themeMode,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("TimePickerPage"),
        ),
        body: Column(
          children: [
            ElevatedButton(
                onPressed: () {
                  print('themeMode====111${themeMode != ThemeMode.light}');
                  setState(() {
                    themeMode = themeMode != ThemeMode.light
                        ? ThemeMode.light
                        : ThemeMode.dark;
                    print('themeMode====222${themeMode}');
                  });
                },
                child: const Text("修改主题颜色")),
            Expanded(
                child: GridView(
              gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 350,
                  mainAxisSpacing: 4,
                  mainAxisExtent: 200 * MediaQuery.textScaleFactorOf(context),
                  crossAxisSpacing: 4),
              children: const [
                Card(
                  child: Padding(
                    padding: EdgeInsets.all(20),
                    child: Text("111111111111111"),
                  ),
                ),
                Card(
                  child: Padding(
                    padding: EdgeInsets.all(20),
                    child: Text("22222222222222222222222"),
                  ),
                ),
                Card(
                  child: Padding(
                    padding: EdgeInsets.all(20),
                    child: Text("3333333333333333"),
                  ),
                ),
                Card(
                  child: Padding(
                    padding: EdgeInsets.all(20),
                    child: Text("444444444444444"),
                  ),
                ),
                Card(
                  child: Padding(
                    padding: EdgeInsets.all(20),
                    child: Text("555555555555555"),
                  ),
                ),
              ],
            )),
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(10),
                    child: ElevatedButton(
                      child: const Text("Open time picker"),
                      onPressed: () {
                        openTimeDialog(context);
                      },
                    ),
                  ),
                  if (selectedTime != null)
                    Text("Selected time:${selectedTime!.format(context)}"),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  Future<void> openTimeDialog(context) async {
    final TimeOfDay? time = await showTimePicker(
      context: context,
      initialTime: selectedTime ?? TimeOfDay.now(),
      initialEntryMode: TimePickerEntryMode.dial,
      orientation: Orientation.portrait,
      builder: (BuildContext context, Widget? child) {
        // We just wrap these environmental changes around the
        // child in this builder so that we can apply the
        // options selected above. In regular usage, this is
        // rarely necessary, because the default values are
        // usually used as-is.
        return Theme(
          data: Theme.of(context).copyWith(
            materialTapTargetSize: MaterialTapTargetSize.padded,
          ),
          child: Directionality(
            textDirection: TextDirection.ltr,
            child: MediaQuery(
              data: MediaQuery.of(context).copyWith(
                alwaysUse24HourFormat: true,
              ),
              child: child!,
            ),
          ),
        );
      },
    );
    setState(() {
      selectedTime = time;
    });
  }
}
